<template>
  <div>
    <header>
     <div>
        <p>name</p>
        <p>telephone</p>
     </div>
     <font>账户设置</font>
    </header>
    <div class="chihuo">
        <div>
            <span>吃货卡</span>
            <span>吃货豆 1461</span>
        </div>
        <p>开启超级吃货卡,立减10000000</p>
    </div>
    <div class="hongbao">
        <div class="left">
            <p>红包</p>
        </div>
        <div class="right">
            <p>余额</p>
        </div>
    </div>
    <div class="gongju">
       <p>常用工具</p>
       <div>
        <span>我的地址</span>
        <span>我的地址</span>
        <span>我的地址</span>
        <span>我的地址</span>
       </div>
    </div>
    <div class="xianjin">
        <div class="xleft">
            <p>邀请好友赚现金</p>
            <img src="" alt="">
        </div>
        <div class="xright">
            <p>饿了么服务号</p>
            <img src="" alt="">
        </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
header{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 10px;
}
header font{
    margin-right: 10px;
}
header div p:nth-child(1){
    font-size: 14px;
    font-weight: 700;
}
header div p:nth-child(2){
    font-size: 12px;
    color: rgb(112, 112, 111);
}
.chihuo {
    height: 60px;
    width: 100%;
    border-radius: 7px;
    background-color: skyblue;
}
.chihuo div{
    width: 100%;
    display: flex;
}
.chihuo div span{
    margin-right: 10px;
    color: aliceblue;
    padding-left: 10px;
    margin-top:10px;
}
.chihuo  p{
    font-size: 12px;
    color: antiquewhite;
    padding-left: 10px;
    margin-bottom: 10px;
}
.hongbao{
    height: 80px;
    width: 100%;
    display: flex;
}
.left{
    width: 50%;
    height: 100%;
    text-align: center;
}
.right{
    width: 50%;
    height: 100%;
    text-align: center;
}
.gongju{
    height: 80px;
    width: 100%;
}
.gongju div{
    display: flex;
    justify-content: space-around;
}
.xianjin{
    height: 120px;
    width: 100%;
    display: flex;
}
.xleft{
    width: 50%;
    height: 100%;
    text-align: center;
}
.xright{
    width: 50%;
    height: 100%;
    text-align: center;
}
</style>